<template>
  <div class="music">
    <div class="item" v-for="item of music" :key="item.id">
      <router-link :to="{path:'/MusicDetail',query:{id:item.id}}">
      <img class="pic" :src="item.coverImgUrl" alt="">
      </router-link>
      <div class="name">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Top250',
  data(){
    return {
      music:[]
    }
  },
  mounted() {
    this.$http.get('http://47.108.197.28:3000/top/playlist?cat=华语').then(res=>{
      this.music = res.data.playlists
    })
  },
}
</script>

<style scoped>
.music{
  padding-left: 50px;
  display: flex;
  flex-wrap: wrap;
}
.item{
  width: 200px;
  margin-bottom: 20px;
}
.name{
  width:180px;
}
.pic{
  width:180px;
  height: 170px;
}
</style>
